<template>
  <div class="home-page" ref="homePage">
    <div>
      <Header />
      <van-sticky>
        <div class="nav-wrap">
          <van-tabs @click="tabChange" class="nav-tabs">
            <van-tab
              v-for="(item, index) in tabs"
              :title="item.name"
              :key="index"
            >
            </van-tab>
          </van-tabs>
          <div class="more-content">
            <img
              src="../../../assets/images/home/more.png"
              alt=""
              srcset=""
              class="more-img"
            />
          </div>
        </div>
      </van-sticky>
    </div>
    <component :is="homeComponent"></component>
  </div>
</template>

<script>
import Header from "./homePage/smallComponents/header";
import ImportantNews from "./homePage/importantNews.vue";
import CaiXin from "./homePage/caiXin";
import zhengWu from "@/views/center/components/homePage/zhengWu";
import Health from "./homePage/health";
import Rongmei from "./homePage/rongmei";
import Live from "./homePage/live";

export default {
  name: "Home",
  components: {
    Header,
    ImportantNews,
    CaiXin,
    Health,
    Rongmei,
    Live,
    zhengWu
  },
  data() {
    return {
      homeComponent: "ImportantNews",
      tabs: [
        {
          name: "要闻",
          components: "ImportantNews"
        },
        {
          name: "菜芯号",
          components: "CaiXin"
        },
        {
          name: "直播",
          components: "live"
        },
        {
          name: "政务",
          components: "zhengWu"
        },
        {
          name: "融媒",
          components: "Rongmei"
        },
        {
          name: "健康",
          components: "Health"
        }
      ]
    };
  },
  methods: {
    tabChange(index) {
      const item = this.tabs[index];
      this.homeComponent = item.components || "ImportantNews";
    }
  },
  watch: {
    homeComponent() {
      if (
        document.body.scrollTop > 100 ||
        document.documentElement.scrollTop > 100
      ) {
        document.body.scrollTop = document.documentElement.scrollTop = 100;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.home-page {
  .nav-wrap {
    background: #ffffff;
    display: flex;

    .more-content {
      display: flex;
      align-items: center;
      padding: 6px;

      .more-img {
        height: 24px;
        width: 24px;
      }
    }

    .nav-tabs {
      flex: 1;
    }
  }
}
</style>
